<template>
  <button @click="flag = !flag">切换</button>
  <!-- animate__animated 必须添加， animate__bounce为效果-->
  <!-- :duration="{ enter: 2000, leave: 3000 }" 为使用动画库时候可以设置的属性 -->
  <transition
    :duration="{ enter: 5000, leave: 8000 }"
    enter-active-class="animate__animated animate__bounce"
    leave-active-class="animate__animated animate__bounceOutLeft"
  >
    <div class="spare" v-if="flag"></div>
  </transition>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import 'animate.css';
const flag = ref<boolean>(true);
</script>

<style lang="scss" scoped>
.spare {
  width: 200px;
  height: 200px;
  background-color: pink;
}
</style>
